<template>
  <zero-dialog :showDialog.sync="dialog.open" :width="dialog.width" :title="dialog.title"
               :fullscreen.sync="dialog.fullscreen" :id="dialog.id"
               :submit="submitFormHandle">
    <div slot="body">
      <vxe-form :ref="form.ref" :data="form.info" :rules="form.rules" title-align="right" title-width="100">
        <vxe-form-item title="数据库类型" field="datasourceType" span="24" :item-render="{}">
          <template #default="{ data }">
            <vxe-select v-model="data.datasourceType" placeholder="请选择数据库类型" clearable>
              <vxe-option v-for="dict in dictType.datasource_type" :key="dict.value" :label="dict.label"
                          :value="dict.value"></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item title="数据库名称" field="name" span="24" :item-render="{}">
          <template #default="{ data }">
            <vxe-input max-length="50" v-model="data.name" showWordCount clearable placeholder="请输入数据库名称"/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="数据库用户" field="username" span="24" :item-render="{}">
          <template #default="{ data }">
            <vxe-input max-length="50" v-model="data.username" showWordCount clearable placeholder="请输入数据库用户"/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="数据库密码" field="password" span="24" :item-render="{}">
          <template #default="{ data }">
            <vxe-input max-length="50" type="password" v-model="data.password" showWordCount clearable
                       placeholder="请输入数据库密码"/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="IP和端口" field="ipPort" span="24" :item-render="{}">
          <template #default="{ data }">
            <vxe-input max-length="50" v-model="data.ipPort" showWordCount clearable placeholder="请输入IP和端口"/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="其他参数" field="otherParams" span="24" :item-render="{}"
                       :title-prefix='{ content: "数据库其他参数（连接数据库时额外配置）", icon: "vxe-icon-question-circle-fill" }'>
          <template #default="{ data }">
            <vxe-input max-length="50" v-model="data.otherParams" showWordCount clearable
                       placeholder="请输入其他参数"/>
          </template>
        </vxe-form-item>
      </vxe-form>
    </div>
    <template v-slot:extra-buttons>
      <el-button @click="testConn">测试连接</el-button>
    </template>
  </zero-dialog>
</template>


<script>
import addUpdate from '@/mixins/add-update.js';
import {encrypt} from '@/utils/jsencrypt';

export default {
  name: 'addUpdateForm',
  mixins: [addUpdate],
  props: {
    dictType: {
      type: Object
    },
  },
  data() {
    return {
      axios: this.$axiosGen, // 请求的微服务，默认授权服务
      addUrl: '/datasourceInfo',
      updateUrl: '/datasourceInfo',
      byIdUrl: '/datasourceInfo',
      dialog: {
        width: '800px', //定义宽度
      },
      form: {//表单数据
        rules: { //表单验证
          datasourceType: [{required: true, message: "请选择数据库类型", trigger: "blur"}],
          name: [{required: true, message: "数据库名称不能为空", trigger: "blur"}],
          username: [{required: true, message: "数据库用户名不能为空", trigger: "blur"}],
          password: [{required: true, message: "数据库密码不能为空", trigger: "blur"}],
          ipPort: [{required: true, message: "IP和端口不能为空", trigger: "blur"}]
        }
      }
    }
  },
  methods: {
    testConn() {
      this.$refs[this.form.ref].validate((valid) => {
        if (!valid) {
          //弹框的loading
          let loading = this.$loading({target: `#${this.dialog.id} >div >.el-dialog`});
          let data = JSON.parse(JSON.stringify(this.form.info))
          data.username = encrypt(data.username)
          data.password = encrypt(data.password)
          let config = {
            url: "/datasourceInfo/testConn",
            method: 'POST',
            data: data
          }
          this.axios(config).then(res => {
            this.$modal.msgSuccess(res.msg);
          }).catch(() => {
          }).finally(() => {
            loading.close()
          });
        }
      })
    },
    submitFormHandle() {
      let data = JSON.parse(JSON.stringify(this.form.info))
      data.username = encrypt(data.username)
      data.password = encrypt(data.password)
      this.submitForm(data)
    }
  }
}
</script>
